/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/index' as styles;
@use '../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../internal/styles/typography/index' as typographyConstants;
@use './motion';

@use './calendar' as calendar;

.root {
  /* used in test-utils */
}

@mixin item-border-radius {
  border-start-start-radius: awsui.$border-radius-item;
  border-start-end-radius: awsui.$border-radius-item;
  border-end-start-radius: awsui.$border-radius-item;
  border-end-end-radius: awsui.$border-radius-item;
}

.calendar {
  @include styles.styles-reset;
  display: block;
  inline-size: awsui.$size-calendar-grid-width;
  overflow: auto;

  &-inner {
    margin-block: awsui.$space-xs;
    margin-inline: awsui.$space-xs;
  }

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-header-title {
    @include styles.font-body-m;
    font-weight: typographyConstants.$font-weight-bold;
    color: calendar.$header-color;
    margin-block: 0;
    margin-inline: 0;
  }

  &-next-btn {
    /* used for identifying element */
  }

  &-prev-btn {
    /* used for identifying element */
  }

  &-grid {
    inline-size: 100%;
    table-layout: fixed;

    &:not(.calendar-grid-dense) {
      border-spacing: awsui.$space-calendar-grid-gutter;
      padding-block: awsui.$space-xs;
      padding-inline: awsui.$space-xs;
    }
    &-dense {
      border-spacing: 0;
    }
  }

  &-grid-cell {
    word-break: break-word;
    text-align: center;
    font-weight: unset;
  }

  &-date-header {
    padding-block-start: awsui.$space-s;
    padding-block-end: awsui.$space-xxs;
    padding-inline: 0;
    color: calendar.$grid-date-name-color;
    @include styles.font-body-s;
  }

  &-date {
    border-block-end: calendar.$grid-border;
    border-inline-end: calendar.$grid-border;
    padding-block: awsui.$space-xxs;
    padding-inline: 0;
    color: calendar.$grid-disabled-date-color;
    position: relative;

    &:first-child {
      border-inline-start: calendar.$grid-border;
    }

    &-enabled {
      cursor: pointer;
      color: calendar.$grid-nonmonth-day-color;
      &::after {
        @include item-border-radius;
      }
      &.calendar-date-current-page {
        color: calendar.$grid-date-color;
        &:hover {
          @include item-border-radius;
          color: awsui.$color-text-calendar-date-hover;
          background-color: calendar.$grid-hover-background-color;
          &:not(.calendar-date-selected) {
            &::after {
              border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
              border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
            }
          }
        }
      }
    }

    &-current {
      @include item-border-radius;
      background-color: calendar.$grid-current-date-background-color;
      font-weight: styles.$font-weight-bold;
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      background-color: transparent;
      inset-block-start: calc(-1 * #{awsui.$border-item-width});
      inset-inline-start: calc(-1 * #{awsui.$border-item-width});
      inset-inline-end: calc(-1 * #{awsui.$border-item-width});
    }

    &:not(.calendar-date-dense)::after {
      inset-block-end: calc(-1 * #{awsui.$border-item-width});
      inset-inline-start: calc(-1 * #{awsui.$border-item-width});
    }

    &-dense::after {
      // Limit the overflow when there are no gutters.
      // Otherwise the cells would start to overlap when the border is larger than 1px.
      inset-block-end: -1px;
      inset-inline-start: -1px;
    }

    > .date-inner {
      position: relative;
      z-index: 1;
    }

    &:focus {
      outline: none;
      @include focus-visible.when-visible {
        @include styles.focus-highlight(
          awsui.$space-calendar-grid-focus-outline-gutter,
          awsui.$border-radius-calendar-day-focus-ring
        );
        &::before {
          z-index: 2;
        }
      }
    }

    &-selected {
      border-color: transparent;
      position: relative;
      z-index: 2;
      font-weight: styles.$font-weight-bold;
      &:focus {
        @include focus-visible.when-visible {
          @include styles.focus-highlight(
            awsui.$space-calendar-grid-focus-outline-gutter,
            awsui.$border-radius-calendar-day-focus-ring,
            calendar.$grid-selected-focused-box-shadow
          );
          &::before {
            z-index: 2;
          }
        }
      }
      &::after {
        @include item-border-radius;
        background-color: calendar.$grid-selected-background-color;
        border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
        border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
      }
      > .date-inner {
        z-index: 2;
        color: calendar.$grid-selected-text-color;
        position: relative;
      }
    }
  }

  &-row {
    &:first-child {
      > .calendar-date {
        border-block-start: calendar.$grid-border;
      }
    }
  }
}

.disabled-reason-tooltip {
  /* used in test-utils or tests */
}
